<template>

			<view class="login-page-img-money-wrap">
				<image src="../static/login/jb.png" class="image_money"></image>
			</view>
			<view class="login-page-big-title">
				<view class="black-bold-word">嘉会</view>
				<view class="blue-bold-word">钱包</view>
			</view>

			<view class="login-page-login-content">
				<view class="login-page-login-content-unit">最高可借金额(元)</view>
				<view class="login-page-login-content-num-wrap">
					<view class="login-page-login-content-num">
						200,000
					</view>
					<view class="quick-edit">
						快速审核
					</view>

				</view>
				<view class="login-page-login-content-desc">
					安全合规，信息透明，快速下款
				</view>
				<view class="login-page-phone-input-wrap">
					<input v-model="phone" @input="inputFn" class="login-page-phone-input" adjust-position="false"
						maxlength="11" type="tel" placeholder="请输入手机号" />
				</view>


				<view class="login-page-login-action" @click="$noMultipleClicks(sendCode)">
					<text class="login-page-login-action-word">我要借款</text>
				</view>
			</view>

			<view class="page">

				<view class="dialog-mask" v-if="showDialog">
					<view class="dialog-box">
						<view class="dialog-title-box">
							<view class="line" />
							<view class="diamond" />
							<view class="title-text">填写验证码</view>
							<view class="diamond" />
							<view class="line" />
						</view>


						<text class="getCode" :style="{ visibility: count > 0 ? 'visible' : 'hidden' }">
							({{ count }}s)
						</text>

						<view class="code-box" @click="focusRealInput">
							<view v-for="i in 4" :key="i" class="code-display">
								<text>{{ smsCode[i - 1] || '' }}</text>
							</view>
							<input class="real-input" v-model="smsCode" maxlength="4" @input="inputFnYzm" type="number"
								adjust-position="false" :focus="realInputFocused" @blur="onRealInputBlur" />
						</view>

						<view class="grayline-wrapper">
							<view class="half-circle left"></view>
							<view class='grayline'></view>
							<view class="half-circle right"></view>
						</view>


						<view class="resend-btn-wrap">

							<button class="resend-btn" :class="{ 'disabled': !!(count>0) }"
								@click="newCode()">更新验证码</button>
						</view>

						<view class="cancel-btn">
							<image class="cancel-btn-img" src="@/static/index/icon_gb.png" @click="cancelDialog()" />
						</view>
						
					</view>
				</view>

			</view>
			<view class="base-message">
				<baseMessage />
			</view>







</template>
<script>
	import baseMessage from '@/pagesA/form/index.vue'
	import xyswiper from '@/components/xySwiper.vue'
	import {
		login,
		clickChannel,
		sendSmsCode,
		checkChannelV1,
		oldRegisterV5,
		analysis
	} from "@/api/index.js";


	import w_md5 from "@/js_sdk/zww-md5/w_md5.js"
	import {
		JSEncrypt
	} from 'jsencrypt-plus';

	export default {
		components: {
			w_md5,
			xyswiper,
			baseMessage,
		},
		data() {
			return {
				showDialog: false,
				code: '',
				realInputFocused: true,
				backAffirmList: [{
						url: '@/static/index/icon_tag1.png',
						msg: '以匹配产品的申请机会'
					},
					{
						url: '@/static/index/icon_tag2.png',
						msg: '初审已通过，确认额度立即提现'
					},
					{
						url: '@/static/index/icon_tag3.png',
						msg: '优质信贷经理专属服务'
					}
				],
				// 防抖节流
				noClick: true,

				xyActive: null,
				phone: "",
				smsCode: "",
				isWeixin: false,
				isOpen: 1,
				count: 60, // 倒计时总秒数
				timer: null, // 定时器
			}

		},
		async onShow() {


			// 用户免登录
			this.tokens = JSON.parse(localStorage.getItem('tokens'));
			if (this.tokens) {
				// copy 取得   
				uni.setStorageSync('token', this.tokens);
				let pppp = await oldRegisterV5()
				this.goPagesList(pppp)
			}
			// 用户免登录
			this.$ymmd({
				name: '首页',
				age: "23"
			})

		},

		async onLoad(option) {
			// 获取跳转过来的链接结束
			let queryParams = {}
			var PUBLIC_KEY = `-----BEGIN PUBLIC KEY-----
								MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC41n1LMlYKesjPaLEYjEg2R7AZ
								1lOdyjudhTvKrXEdQc9XrxtZIJZhQhmkyZquBsUrtxzRaLIraIhUWbxmaaBiqbLE
								bFWduIIcqbtnSEE2zZhBOqdnj3qa1YzEbo6bOEUB0cGWMy0yNlQBGJVMFAFIywEL
								4Diuf3ByF5Fs5Xs4YwIDAQAB
								-----END PUBLIC KEY-----`;
			var encryptContext = new JSEncrypt();
			encryptContext.setPublicKey(PUBLIC_KEY);
			var data = {
				time: new Date().getTime(),
				sign: 'zsSuzfL0f5'
			};
			data = JSON.stringify(data);
			var encryptedData = encryptContext.encryptLong(data);
			this.init(encryptedData)
			this.phone = uni.getStorageSync('phone');
		},
		beforeDestroy() {
			if (this.timer) { // 组件销毁前清除定时器，防止内存泄漏
				clearInterval(this.timer);
			}
		},
		methods: {
			onRealInputBlur() {
				// 输入框失焦时再次聚焦（让用户连续输完）
				this.focusRealInput();
			},
			focusRealInput() {
				this.realInputFocused = false;
				this.$nextTick(() => {
					this.realInputFocused = true;
				});
			},
			openDialog() {
				this.code = ''
				this.showDialog = true
			},
			cancelDialog() {
				this.showDialog = false;
				this.smsCode = ''
			},
			confirmDialog() {
				if (!this.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				uni.showToast({
					title: '验证码已提交',
					icon: 'success'
				})
				this.showDialog = false
			},
			inputFn(e) {
				if (this.phone.length == 11) {
					// this.sendCode()
				}
			},
			async inputFnYzm(e) {
				if (this.smsCode.length === 4) {
					const success = await this.loginclick(); // 拿到结果

					if (!success) {
						this.smsCode = ''; // 清空输入
						this.showDialog = true; // 保持弹框
						uni.showToast({
							title: '验证码错误，请重新输入',
							icon: 'none'
						});
					}
				}
			},






			closeBackAffirm() {
				this.$refs.backAffirm.close()
				this.$refs.surePageLj.close()

			},
			async init(encryptedData) {
				var iswx = 0
				let res = await checkChannelV1()
				// 微信浏览器条件下运行   
				if (this.isWeiXinBrowser()) {
					iswx = 1
					if (res.data.wxopen == 0) {
						this.isWeixin = true
					} else if (res.data.wxopen == 1) {
						this.isWeixin = false
					}
				} else {
					iswx = 0
				}
				if (res.data.status == 0) {
					// 404
					this.isOpen = -1
				} else {
					this.isOpen = 1
					var hostname = location.hostname

				}

				let ddd = {
					"mobile": '',
					"type": 1,
					"sign": encryptedData,
					"iswx": iswx
				}
				let res2s = await clickChannel(ddd)
			},


			isWeiXinBrowser() {
				// #ifdef H5
				// window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
				let ua = window.navigator.userAgent.toLowerCase()
				// 通过正则表达式匹配ua中是否含有MicroMessenger字符串
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true
				} else {
					return false
				}
				// #endif
				return false
			},
			async sendCode() {
				let regex = /^1[3-9]\d{9}$/;
				if (!regex.test(this.phone)) {
					this.ts("请输入正确的手机号码");
					return;
				}

				// 清除旧定时器（防止多重定时器）
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}

				// 初始化倒计时
				this.count = 60;

				// 新建定时器
				this.timer = setInterval(() => {
					if (this.count > 0) {
						this.count -= 1;
					} else {
						clearInterval(this.timer);
						this.timer = null;
					}
				}, 1000);

				// 下面是发送验证码逻辑
				this.$ymmdBtn("ymBtnCode", {
					name: '验证码',
					phone: this.phone
				});
				uni.showLoading({
					title: '正在发送验证码'
				});

				let timestamp1 = new Date().getTime();
				let newStr = timestamp1.toString().slice(0, -4) + timestamp1.toString().slice(-3);

				let sk = w_md5.hex_md5_32(newStr + this.phone);
				let data = {
					mobile: this.phone,
					sk: sk,
					timestamp: timestamp1,
					type: 1
				};

				let rrr = await sendSmsCode(data);
				if (rrr.code == 100000) {
					this.$ts("发送成功!");
					uni.hideLoading();
					this.showDialog = true;
				}
			},

			async newCode() {
				// console.log('xxxxxx')
				if (this.count > 0) {
					uni.showToast({
						title: '验证码已发送，请稍候',
						icon: 'none',
						duration: 2000
					});
					return;
				}

				// 同样先清除旧定时器
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null;
				}

				this.count = 60;

				this.timer = setInterval(() => {
					if (this.count > 0) {
						this.count -= 1;
					} else {
						clearInterval(this.timer);
						this.timer = null;
					}
				}, 1000);

				this.$ymmdBtn("ymBtnCode", {
					name: '验证码',
					phone: this.phone
				});
				uni.showLoading({
					title: '正在发送验证码'
				});

				let timestamp1 = new Date().getTime();
				let newStr = timestamp1.toString().slice(0, -4) + timestamp1.toString().slice(-3);

				let sk = w_md5.hex_md5_32(newStr + this.phone);
				let data = {
					mobile: this.phone,
					sk: sk,
					timestamp: timestamp1,
					type: 1
				};

				let rrr = await sendSmsCode(data);
				if (rrr.code == 100000) {
					this.$ts("发送成功!");
					uni.hideLoading();
					this.showDialog = true;
				}
			},








			async loginclick() {
				let regex = /^1[3-9]\d{9}$/;
				let phoneStr = this.phone;
				let sk = w_md5.hex_md5_32(phoneStr + "Nas1WjGRGe");

				uni.showLoading({
					title: '登录中...',
					mask: true
				});

				let data = {
					mobile: phoneStr,
					sk: sk,
					code: this.smsCode
				};

				try {
					let res1 = await login(data);
					uni.hideLoading();

					//  验证失败
					if (res1.code !== 100000) {
						return false;
					}

					//  验证成功，继续流程
					uni.setStorageSync('token', res1.data.userMess.token);
					uni.setStorageSync('userInfo', res1.data);
					localStorage.setItem('tokens', JSON.stringify(res1.data.userMess.token));

					let data2 = {
						mobile: phoneStr,
						type: 2
					};
					await clickChannel(data2);

					this.showDialog = false; // 关闭弹窗
					this.goPagesList(res1);
					return true;
				} catch (err) {
					uni.hideLoading();
					console.error('登录失败', err);
					return false;
				}
			},


			goPagesList(res1) {
				let that = this
				var url = "";
				switch (res1.data.page) {
					case "form":
						url = "/pagesA/form/index"
						break;
					case "list":
						url = "/pagesC/list/index"
						break;
					case "sure1":
					case "sure2":
					case "shop":
						url = "/pagesA/form/index"
						break;
						// case "form_match":
						// 	const data = encodeURIComponent(JSON.stringify(res1.data.userinfo));
						// 	url = `/pagesA/form/indexOld?type=1&userInfo=${data}`;
						// 	break;
					case "end":
						url = `/pagesE/result/index`;
						break;
				}
				if (url.length > 0) {
					uni.navigateTo({
						url: url
					})
				}
			},
			
			
			
			ts(tit) {
				uni.showToast({
					title: tit,
					icon: 'none',
					duration: 2000
				})
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
				this.$refs.backAffirm.close()
			},

		},
		watch: {

			showDialog(val) {
				if (val) {
					this.smsCode = ''; // 每次打开弹框也清空一次
				}
			}
		},



	}
</script>
<style scoped lang="scss">
	

	.grayline-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-bottom: 22rpx;
	}

	.grayline {

		border-top: 1px dashed #ccc;
		height: 0;
		width: 100%;
	}

	.half-circle {
		width: 20rpx;
		height: 40rpx;
		background-color: rgba(51, 51, 51, 0.4);

	}

	.half-circle.left {
		border-radius: 0 80rpx 80rpx 0;
		margin-left: -50rpx;
	}

	.half-circle.right {
		border-radius: 80rpx 0 0 80rpx;
		margin-right: -50rpx;
	}




	.nofind {

		margin: 300rpx auto;
		text-align: center;

		.nofindImg {
			width: 200rpx;
			height: 200rpx;
			text-align: center;
			margin: 30rpx auto;

			// line-height: 80rpx;
			image {
				width: 100%;
				height: 100%;
				vertical-align: middle;
			}
		}

	}

	.dialog-title-box {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
	}

	.line {
		height: 3rpx;
		background-color: #A0A0A0;
		flex: 1;
		margin: 0 16rpx;
	}

	.diamond {
		width: 10rpx;
		height: 10rpx;
		background-color: #A0A0A0;
		transform: rotate(45deg);
		margin: 0 25rpx;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.xyPup {
		width: 100%;
		background: #fff;
		border-radius: 30rpx 30rpx 0 0;
		height: 65vh;
	}

	.login-page-container {
		padding: 30rpx 28rpx;
		position: relative;
		background-image: url('@/static/login/首页切图.png');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;

		.ml-20 {
			margin-left: 20rpx;
		}



		.login-page-img-money-wrap {
			position: absolute;
			top: 20rpx;
			right: 5rpx;

			.image_money {
				width: 300rpx;
				height: 252rpx;
			}
		}

		.login-page-big-title,
		{
		font-family: Alimama FangYuanTi VF-SemiBold;
		font-weight: 500;
		font-size: 84rpx;
		display: flex;
		flex-direction: row;

		.blue-bold-word {
			color: rgba(62, 119, 242, 1);
			text-shadow: 0px 8px 16px rgba(109, 137, 176, 0.41);
		}

		.black-bold-word {
			text-shadow: 0px 8px 16px rgba(109, 137, 176, 0.41);
			color: rgba(51, 51, 51, 1);

		}
	}

	.login-page-big-title {
		margin-left: 52rpx;
		margin-top: 28rpx;
	}





	.quick-edit {

		margin-right: -112rpx;
		margin-top: -140rpx;
		margin-left: -40rpx;
		z-index: 999;
		padding: 4rpx 18rpx;
		font-size: 24rpx;
		color: #fff;
		border-radius: 32rpx;
		background: linear-gradient(to right, #ff9100, #ff4d00);
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.15);
		width: 114rpx;
		height: 36rpx;
		border-radius: 20rpx 20rpx 20rpx 0rpx;
		border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 94, 29, 1)) 2 2;
	}

	.login-page-login-content {
		background: linear-gradient(224deg, #325FDE 0%, #398AFD 100%);
		box-shadow: 0rpx 8rpx 18rpx 4rpx rgba(185, 197, 235, 0.61);
		border: 2rpx solid #ACCCFB;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		height: 370rpx;

		margin-top: 0;
		position: relative;
		z-index: 20;
		text-align: center;

		.login-page-login-content-unit {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #B9CEFF;
			line-height: 40rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			padding-top: 30rpx;
			padding-bottom: 15rpx;

		}

		.login-page-login-content-num-wrap {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;

			.login-page-login-content-num {
				position: relative;
				margin-top: 50rpx;
				margin-bottom: 20rpx;
				width: 302rpx;
				height: 40rpx;
				font-family: DIN, DIN;
				font-weight: bold;
				font-size: 84rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				z-index: 20;

			}

		}

		.login-page-login-content-desc {
			width: 434rpx;
			height: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			padding-left: 125rpx;
		}

		.login-page-phone-input-wrap {
			.login-page-phone-input {
				background: #032A9C;
				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(59, 106, 206, 0.43);
				border-radius: 86rpx 86rpx 86rpx 86rpx;
				padding: 24rpx 106rpx;
				margin: 28rpx 28rpx 18rpx 28rpx;
			}
		}




		.login-page-login-action {
			background-color: rgba(255, 242, 229, 1);
			margin: 6rpx 28rpx 26rpx 28rpx;
			position: relative;
			padding: 18rpx;
			border-radius: 12rpx;

			.login-page-login-action-word {
				overflow-wrap: break-word;
				color: rgba(125, 63, 21, 1.000000);
				font-size: 32rpx;
				font-family: PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
			}

		}
	}




	}

	// 验证码相关
	.dialog-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.4);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.dialog-box {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		width: 670rpx;
		height: 444rpx;
		box-sizing: border-box;
		text-align: center;
		position: relative;

		.getCode {
			color: rgba(216, 216, 216, 1);
			margin-bottom: 20rpx;
			display: inline-block;
		}
	}

	.dialog-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.dialog-subtitle {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 30rpx;
	}

	.code-box {
		display: flex;
		justify-content: center;
		gap: 20rpx;
		margin-bottom: 40rpx;
	}

	.code-input {
		width: 80rpx;
		height: 80rpx;
		border: 1px solid #e0e0e0;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		color: #333;
		background-color: #f9f9f9;
	}



	.resend-btn-wrap {
		display: flex;
		justify-content: center;
	}

	.resend-btn {
		color: #007aff;
		font-size: 28rpx;
		background: transparent;
		border: none;
		padding: 0;
		margin: 0;
		line-height: 1;
		/* 可选 */
		box-shadow: none;
		border: none;
		z-index: 999;

		&.disabled {
			color: #d8d8d8;
		}

		&::after {
			content: '';
			border: none;
		}
	}

	.cancel-btn {
		position: absolute;
		bottom: -52px;
		left: 50%;
		margin-left: -24rpx;

		.cancel-btn-img {
			width: 48rpx;
			height: 48rpx;
		}

	}

	.code-display {
		width: 100rpx;
		height: 100rpx;
		border-radius: 8rpx;
		background-color: #f6f7f9;
		border: 2rpx solid #e0e0e0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
	}

	.real-input {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		
		
		
		opacity: 0;
		z-index: 10;
	}


	.code-input {
		width: 80rpx;
		height: 80rpx;
		border: 1px solid #ddd;
		border-radius: 10rpx;
		text-align: center;
		font-size: 36rpx;
		color: #333;
		background-color: #f9f9f9;
	}
</style>